<!--
 * @Descripttion: 
 * @version: 
 * @Author: hollow
 * @Date: 2021-03-24 14:29:46
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-25 19:45:07
-->
<template>
  <div class="container">
    <div class="left">
      <ul>
        <li
          v-for="(item) in liList"
          :key="item.name"
          :class="{active:active==item.name}"
          @click="selected(item.name)"
        >{{item.name}}</li>
      </ul>
    </div>
    <div class="right">
      <!-- 绑定@input搜索事件 -->
      <input type="text" placeholder="请输入搜索内容" @input="find()" v-model="ipt" />
      <button @click="add()">新增</button>
      <div class="mask">
        <!-- <div class="adddiv">
          <el-input v-model="input" placeholder="请输入小区名称" @input="add1"></el-input>
          <el-input v-model="input" placeholder="请输入所属管理处"></el-input>
          <el-input v-model="input" placeholder="请输入车位显示"></el-input>
          <el-input v-model="input" placeholder="请输入联系电话"></el-input>
          <el-input v-model="input" placeholder="请输入滞纳金"></el-input>
          <el-input v-model="input" placeholder="请输入备注"></el-input>
          <el-button type="primary" @click="confirm()">确定</el-button>
        </div> -->
      </div>
      <button @click="xuan()">筛选</button>
      <table border="1" align="center" cellpadding="0" cellspacing="0">
        <thead>
          <td>小区名称</td>
          <td>所属管理处</td>
          <td>车位显示</td>
          <td>联系电话</td>
          <td>滞纳金</td>
          <td>备注</td>
          <td>操作</td>
        </thead>
        <tbody v-for="(item) in list" :key="item.id">
          <td>{{item.name}}</td>
          <td>{{item.manage}}</td>
          <td>{{item.car}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.money}}</td>
          <td>{{item.title}}</td>
          <td>
            <!-- 点击删除传item.id -->
            <button @click="del(item.id)">删除</button>
            <button>编辑</button>
          </td>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
export default {

  data() {
    return {
      input: '',
      ipt: '',
      addDetail: {},
      liList: [
        {
          name: '日常管理',
        },
        {
          name: '基础资料',
        },
        {
          name: '车位管理',
        },
        {
          name: '抄表管理'
        },
        {
          name: '收费业务',
        },
        {
          name: '统计查询',
        },
        {
          name: '租赁管理',
        },
        {
          name: '短信管理',
        }
      ],
      active: 0,
    }
  },
  // 相当于解构那个渲染的数据
  computed: {
    ...mapState(['list'])
  },

  methods: {

    selected(name) {
      this.active = name
    },
    // 调用渲染数据的方法
    ...mapActions(['H_data']),
    // ...mapMutations
    // 删除
    del(id) {
      console.log(id)
      this.$store.commit('del', id)
    },
    // 搜索
    find(ev) {
      let ipt = this.ipt
      // commit就是派发事件
      this.$store.commit('find', ipt)
    },
    // 筛选
    xuan() {
      this.$store.commit('xuan')
    },
    add() {
      document.querySelector('.mask').style.display = "block";
      document.querySelector('.adddiv').style.display = "block";
    },
    这两个暂时不写因为是添加的功能我还没写完
    // confirm() {
    //   this.addpush(this.input)
    // },
    // add1() {
    //   console.log(this.input)
    // }
  },

  created() {
    this.H_data();
  },

}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  .adddiv {
    width: 500px;
    box-sizing: border-box;
    padding: 20px;
    height: 500px;
    background-color: #fff;
    display: none;
    margin: 50px auto;
    .el-input__inner {
      margin-bottom: 15px;
    }
  }
}
.left {
  width: 150px;
  height: 500px;
  ul {
    width: 150px;
    height: 500px;
    li {
      width: 150px;
      text-align: center;
      line-height: 40px;
    }
    .active {
      background: teal;
      color: #fff;
    }
  }
}
.right {
  flex: 1;
  height: 500px;
  table {
    border: solid 1px #ccc;

    thead {
      td {
        padding: 10px 20px;
        border: 1;
      }
    }
    tbody {
      td {
        padding: 10px 20px;
        border: 1;
      }
    }
  }
}
</style>